<template>
<div class="talentRecommend" @click="toDetail(talent)">
  <div class="it-left">
      <div class="p1">
        <p class="t1">·姓名：</p>
        <p class="tex">{{talent.name}} </p>
      </div>
      <div class="p1">
        <p class="t1">·专家：</p>
        <p class="tex">{{$selectDict(expertTypes, talent.expertType).dictLabel}}</p>
      </div>
      <div class="p1">
        <p class="t1">·擅长领域：</p>
        <p class="tex">{{lndustryField(talent.lndustryField)}}</p>
      </div>
  </div>
  <div class="it-img">
    <PublicImage
      v-if="talent.headUrl"
      :src="talent.headUrl"
    ></PublicImage>
    <PublicImage
      v-else
      :src="require('@/assets/image/finance/txico.png')"
    ></PublicImage>
  </div>
</div>
</template>

<script>
export default {
  props: {
    talent: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    return{
      expertTypes: [],
      industryFields: [],
    }
  },
  computed: {
		lndustryField() {
			return function(value){
				let strs = []
        if(value){
          strs = value.split(',')
        }
				let data = []
				strs.forEach((el, i) => {
					data.push(this.$selectDict(this.industryFields, el).dictLabel)
				});
				let str = data.join(',')
				return str.length > 30 ? str.substring(0,30) + '...' : str
			}
		}
  },
  created(){
    let api = `expert_type,company_industry`
      // 调用公共方法中的查询字典表
    this.getDictList(this, api).then((res) => {
      this.expertTypes = res.expert_type
      this.industryFields = res.company_industry
    })
  },
  methods: {
    toDetail(item) {
      this.$router.push({ name: 'talentRecommendDetail', params: { talent: JSON.stringify(item), isHelp: true } });
    }
  },
}
</script>

<style lang="scss" scoped>
.talentRecommend{
    width: 32%;
    height: 140px;
    box-sizing: border-box;
    border: 10px solid #F1F2F4;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .it-left{
      width: 178px;
      .p1{
        display: flex;
        margin-top: 10px;
        color: #666666;
        font-size: 14px;
        .t1{
          width: 80px;
          text-align: right;
          margin-right: 10px;
        }
        .tex{
          text-align: left;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 95%;
        }
      }
    }
    .it-img{
      width: 35px;
      height: 35px;
      margin-top: 15px;
      margin-right: 5px;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>